<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <button id="btn">123456</button>
  <body>
    <script>
      /**
    存在back、forward、go实现路由跳转

html5新增了pushState和replaceState两个方法，这两个请求的共同点是：url改变但是不会立即发送请求。

history路由是使用pushState和replaceState实现路由跳转的（需要使用supportsPushState来判断是否兼容）

history路由在刷新页面后可能出现404问题，所以需要在服务端增加一个覆盖所有情况的候选资源，如果url请求不到 任何静态资源则返回对应app依赖的index.html
*/
      // 需要用liveserve打开
      let parame = {
        name: "zds",
      };
      btn.onclick = function () {
        history.replaceState(
          parame,
          "page 2",
          window.location.href + "#2.html"
        );
      };
    </script>
  </body>
</html>
